import 'package:flutter/material.dart';

import '../Utils/color_utils.dart';

class LeftNavigationBar extends StatefulWidget {
  const LeftNavigationBar({
    super.key,
    required this.navigationItemsInfo,
    required this.selectedIndex,
    required this.onSelect,
  });
  final List navigationItemsInfo;
  final int selectedIndex;
  final ValueChanged<int> onSelect;

  @override
  State<LeftNavigationBar> createState() => _LeftNavigationBarState();
}

class _LeftNavigationBarState extends State<LeftNavigationBar> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: double.infinity,
      padding: const EdgeInsets.only(top: 20),
      child: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: widget.navigationItemsInfo.map(
            (item) => LeftNavigationBarItem(
              navigationItemsInfo: widget.navigationItemsInfo,
              item: item,
              active: widget.selectedIndex == widget.navigationItemsInfo.indexOf(item),
              onSelect: widget.onSelect,
            ),
          ).toList(),
        ),
      ),
    );
  }
}

class LeftNavigationBarItem extends StatefulWidget {
  const LeftNavigationBarItem({
    super.key,
    required this.navigationItemsInfo,
    required this.active,
    required this.item,
    required this.onSelect,
  });
  final List navigationItemsInfo;
  final bool active;
  final NavigationItemInfo item;
  final ValueChanged<int> onSelect;

  @override
  State<LeftNavigationBarItem> createState() => _LeftNavigationBarItemState();
}

class _LeftNavigationBarItemState extends State<LeftNavigationBarItem> {
  bool _hovering = false;
  final Color hoveringColor = YZMColors.color_white_50;
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 12,vertical: 5),
      decoration: BoxDecoration(
        color: widget.active || _hovering ? hoveringColor : YZMColors.transparent,
        borderRadius: BorderRadius.circular(12),
      ),
      child: MouseRegion(
        onEnter: (event) {
          setState(() {
            _hovering = true;
          });
        },
        onExit: (event) {
          setState(() {
            _hovering = false;
          });
        },
        child: GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () {
            widget.onSelect(widget.navigationItemsInfo.indexOf(widget.item));
          },
          child: Container(
            padding: const EdgeInsets.all(12),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Image.asset(
                  widget.active ? widget.item.activeIcon : widget.item.icon,
                  width: widget.item.width,
                  height: widget.item.height,
                ),
                const SizedBox(
                  width: 8,
                ),
                Text(
                  widget.item.label,
                  style: TextStyle(
                    color: YZMColors.color_black,
                    fontWeight: widget.active ? FontWeight.bold : FontWeight.normal,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class NavigationItemInfo {
  String label;
  String icon;
  String activeIcon;
  double width;
  double height;

  NavigationItemInfo({
    required this.label,
    required this.icon,
    required this.activeIcon,
    required this.width,
    required this.height,
  });
}